<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="content clearfix">
    <div class="content-left" onclick="a()">
        <div class="todo-top">
            <div class="to-1 clearfix">
                <div class="to-1-left">
                    <a href="">
                        <img src="img/m-1.jpg" alt="">
                    </a>
                    <span>过往~</span>
                </div>
                <div class="to-1-right">
                    <a href="">
                        <img src="img/m-2.jpg" alt="">
                    </a>
                    <a href="" class="q-1">
                        <img src="img/m-3.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="to-2">
                <div class="to-z clearfix">
                    <a href="">
                        <img src="img/w-1.jpg" alt="">
                        <p>最近7天</p>
                    </a>
                </div>
            </div>
            <div class="to-2">
                <div class="to-z clearfix">
                    <a href="">
                        <img src="img/w-2.jpg" alt="">
                        <p>日历</p>
                    </a>
                </div>
            </div>
            <div class="to-4">
                <div class="to-z action clearfix">
                    <div class="to-z-left">
                        <a href="">
                            <img src="img/w-3.jpg" alt="">
                            <p>收集箱</p>
                        </a>
                    </div>
                    <div class="to-z-right">2</div>
                </div>
            </div>
            <div class="to-5">
                <div class="to-z2">
                    <ul class="an clearfix">
                        <li class="active" id="tt-1">清单</li>
                        <li id="tt-2">标签</li>
                        <li id="tt-3">自定义</li>
                    </ul>
                    <div class="tt">
                        <div class="t-1 clearfix active" id="t-1">
                            <a href="">
                                <img src="img/w-4.jpg" alt="">
                                <p>添加清单</p>
                            </a>
                        </div>
                        <div class="t-2 clearfix" id="t-2">
                            <a href="">
                                <img src="img/w-4.jpg" alt="">
                                <p>添加标签</p>
                            </a>
                        </div>
                        <div class="t-3 clearfix" id="t-3">
                            <a href="">
                                <img src="img/w-4.jpg" alt="">
                                <p>添加智能清单</p>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <div class="to-6">
                <div class="to-z clearfix">
                    <a href="">
                        <img src="img/w-4.jpg" alt="">
                        <p>已完成</p>
                    </a>
                </div>
                <div class="to-z clearfix">
                    <a href="">
                        <img src="img/w-4.jpg" alt="">
                        <p>垃圾桶</p>
                    </a>
                </div>
            </div>
            <div class="to-7">
                <div class="to-z clearfix">
                    <a href="">
                        <img src="img/w-7.jpg" alt="">
                        <p>摘要</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="todo-bottom">
            <div class="do-z clearfix">
                <div class="tb-left clearfix">
                    <a href="">
                        <img src="img/w-9.jpg" alt="">
                        <p>升级到高级会员</p>
                    </a>
                </div>
                <div class="tb-right">
                    <img src="img/w-10.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="content-middle">
        <div class="collect-inner">
            <div class="collect" >
                <div class="c-1 clearfix" onclick="a()">
                    <div class="c-1-left">
                        <h2>收集箱</h2>
                    </div>
                    <div class="c-1-right">
                        <a href="">
                            <img src="img/s-1.jpg" alt="">
                        </a>
                        <a href="" class="q-1">
                            <img src="img/s-2.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="c-2" id="c-2">
                    <input type="text" placeholder="添加任务至“收集箱”，点击即可保存" value="" id="text">
                    <button id="button">收集</button>
                    <!--<ul class="clearfix" id="dian">-->
                        <!--<li><a href=""><img src="img/s-3.jpg" alt=""></a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>-->
                        <!--<li><a href=""><img src="img/s-5.jpg" alt=""></a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>-->
                        <!--<li id="hu"><a href=""></a><img src="img/s-6.jpg" alt=""></li>-->
                    <!--</ul>-->
                </div>
                <div class="main">
                    <div class="c-3 clearfix" id="shi">
                        <div class="shi" id="hi">
                            <img src="img/left.jpg" alt="" class="left-1">
                            <img src="img/right.jpg" alt="" class="right-1">
                        </div>
                        <div class="c-3-1">
                            <img src="img/hu.jpg" alt="">
                        </div>
                        <div class="c-3-2">
                            <p>欢迎加入滴答清单</p>
                        </div>
                    </div>
                    <div class="c-4 clearfix">
                        <div class="c-4-1">
                            <img src="img/an.jpg" alt="">
                        </div>
                        <div class="c-4-2">
                            <p>我能用滴答清单做什么？</p>
                        </div>
                    </div>
                    <h4>正在进行</h4>
                    <ul id="r1" class="r1 clearfix">

                    </ul>
                    <h4>已完成</h4>
                    <ul id="r2" class="r2 clearfix">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content-right">
        <div class="c-right">
            <img src="img/m-right.jpg" alt="">
            <h2>点击任务标题查看详情</h2>
        </div>
    </div>
</div>


<script src="js.js"></script>
</body>
</html>